import addCommas from '@/utils/addCommas';
import { useEffect, useState } from 'react';
import './index.less';
const ShowData = (props: {
  imageName: string;
  titleName: string;
  Number: string;
  unit: string;
  isMoney: boolean;
}) => {
  const { imageName, titleName, Number, unit, isMoney } = props;
  const [image, setImage] = useState(null);
  useEffect(() => {
    // import(`@/public/visual/${imageName}.svg`).then((img) => {
    //   setImage(img.default);
    // });
    import(`../../../../public/visual/${imageName}.svg`).then((img) => {
      setImage(img.default);
    });
  }, [imageName]);
  return (
    <div className="ShowData">
      <div className="circle_logo">
        <div className="inner_circle">
          <img src={image ? image : ''} alt="" />
        </div>
      </div>
      <div className="properties">{titleName}</div>
      <div className="totalNumber">{isMoney ? addCommas(Number) : Number}</div>
      <div className="unit">{unit}</div>
      <div className="floatingPanel">
        <img src="/visual/floatingPanel.svg" alt="" />
      </div>
    </div>
  );
};

export default ShowData;
